import React from 'react';
import {connect} from 'dva';
import {Badge, Layout, Tabs, Col, Row } from 'antd';
import BaseComponent from "components/Base/BaseComponent";
import Panel from 'components/Base/Panel';
import './index.less';
import EcgSession from "./EcgSession";
import BpSession from "./BpSession";
import SpoSession from "./SpoSession";
import DeviceStatistics from "./DeviceStatistics";
// import CPU from "./CPU";
const {Content, Footer} = Layout;
const {TabPane} = Tabs

@connect(({deviceStatistics}) => ({deviceStatistics}))
export default class extends BaseComponent {
  getNamespace() {
    return "deviceStatistics";
  }

  componentDidMount() {
    this.refresh();

    this.timer = setInterval(() => {
      this.refresh();
    }, 5000)
  }

  refresh = ()=>{
    this.dispatch({
      type: `${this.getNamespace()}/initStatisticData`,
      payload: {
        notice: this.showMsg
      },
    })
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  getTab = (msg) => {
    return (
      <Badge>
          <span>
            {msg}
          </span>
      </Badge>
    );
  };

  render() {

    return (
      <Layout className="dashboard">

        <Content>
          {/*<Row gutter={20}>*/}
          {/*  <Col md={8}>*/}
          {/*    <Panel className="qq" title="病人总数量"  cover>*/}
          {/*      <h2>*/}
          {/*        <b>523</b>*/}
          {/*      </h2>*/}
          {/*      <h5 className="text-muted">QQ</h5>*/}
          {/*    </Panel>*/}
          {/*  </Col>*/}
          {/*  <Col md={8}>*/}
          {/*    <Panel title="CPU负荷"  cover>*/}
          {/*      /!*<CPU />*!/*/}
          {/*    </Panel>*/}
          {/*  </Col>*/}
          {/*  <Col md={8}>*/}
          {/*    <Panel className="skype" title="数据内存"  cover>*/}
          {/*      <h2>*/}
          {/*        <b>2</b>*/}
          {/*      </h2>*/}
          {/*      <h5 className="text-muted">skype</h5>*/}
          {/*    </Panel>*/}
          {/*  </Col>*/}
          {/*</Row>*/}
          {/*<Row gutter={20}>*/}
          {/*  <Col md={8}>*/}
          {/*    <Panel className="qq" title="心电保存耗时"  cover>*/}
          {/*      <h2>*/}
          {/*        <b>523</b>*/}
          {/*      </h2>*/}
          {/*      <h5 className="text-muted">QQ</h5>*/}
          {/*    </Panel>*/}
          {/*  </Col>*/}
          {/*  <Col md={8}>*/}
          {/*    <Panel className="wechat" title="未处理心电数据"  cover>*/}
          {/*      <h2>*/}
          {/*        <b>99+</b>*/}
          {/*      </h2>*/}
          {/*      <h5 className="text-muted">微信</h5>*/}
          {/*    </Panel>*/}
          {/*  </Col>*/}
          {/*</Row>*/}
          <Panel title="在线设备列表">
            <Tabs defaultActiveKey="1">
              <TabPane tab={this.getTab("在线心电设备列表")} key="1">
                <EcgSession/>
              </TabPane>
              <TabPane tab={this.getTab("在线血压设备列表")} key="2">
                <BpSession/>
              </TabPane>
              <TabPane tab={this.getTab("在线血氧设备列表")} key="3">
                <SpoSession/>
              </TabPane>
            </Tabs>
          </Panel>

          <Panel title="设备数量统计" onRefresh={() => {
            this.dispatch({
              type: `${this.getNamespace()}/initStatisticData`,
              payload: {
                notice: this.showMsg
              },
            })
          }}>
            <DeviceStatistics/>
          </Panel>
        </Content>
      </Layout>
    );
  }
}
